//
//  MemoView.swift
//  memo
//
//  Created by DaleGuo on 2023/10/3.
//

import SwiftUI
import WidgetKit

struct MemoView: View {
    @State var memo: MemoEntity
    @EnvironmentObject var homeVM: HomeViewModel
    @State var offset_memo: CGSize = .zero

    @Binding var add_fail: Bool

    @FocusState private var focused: Bool

    var body: some View {
        ZStack {
            trash_background

            VStack(alignment: .leading) {
                memo_main_section

                if !memo.todos.isEmpty {
                    Divider()

                    ForEach(memo.todos.sorted(by: { $0.updated_date > $1.updated_date })) { todo in
                        TodoRow(todo: todo)
                            .padding(.vertical, 1)
                    }
                }
            }
            .padding()
//            .frame(width: DeviceShape.width * 0.95)
//            .background(Color.gray.opacity(0.3))
            .background(add_fail ? Color.gray : Color("Background"))
            .animation(.spring, value: add_fail)
            .clipShape(RoundedRectangle(cornerRadius: 15))
            .offset(offset_memo)
            .frame(maxWidth: .infinity)
            .gesture(
                DragGesture()
                    .onChanged { value in
//                        withAnimation {
                        if abs(value.translation.width) < 150 {
                            offset_memo.width = value.translation.width
                        }
//                        }
                    }
                    .onEnded { value in
                        withAnimation(.bouncy) {
                            if value.translation.width < -100 {
                                homeVM.deleteMemo_flag(memo: memo)
                            }

                            if value.translation.width > 100 {
                                homeVM.addTodo(memo: memo)
                            }

                            offset_memo = .zero
                        }
                    }
            )
        }
    }
}

extension MemoView {
    private var trash_background: some View {
        HStack {
            Image(systemName: "list.bullet.clipboard")
                .foregroundStyle((offset_memo.width) > 100 ? Color.green : Color.primary)
                .font(.title)
            Spacer()
            Image(systemName: "trash")
                .foregroundStyle((offset_memo.width) < -100 ? Color.green : Color.primary)
                .font(.title)
        }
        .padding(50)
        .opacity(abs(offset_memo.width) > 10 ? 1.0 : 0)

//        Image(systemName: "trash")
//            .frame(maxWidth: .infinity, alignment: .trailing)
//            .padding(.trailing, 50)
//            .font(.title)
//            .foregroundStyle((offset_memo.width) < -100 ? Color.green : Color.primary)
    }

    private var memo_main_section: some View {
        Group {
            TextField("Title", text: $memo.title)
                .textFieldStyle(.plain)
                .font(.title)
                .fontWeight(.bold)
//                .textInputAutocapitalization(.never)
                .focused($focused)

            TextField("左滑增添Todo，右滑删除memo", text: $memo.content, axis: .vertical)
//                .textInputAutocapitalization(.never)
                .focused($focused)

            HStack {
                Text(memo.updated_date.formatted())
                    .font(.caption)
                    .foregroundStyle(Color("SecondaryText"))

                Spacer()

                // 粘贴到小组件
                Text("widget")
                    .font(.caption)
                    .padding(3)
                    .background(Color.gray.opacity(0.5))
                    .clipShape(RoundedRectangle(cornerRadius: 5))
                    .onTapGesture {
                        homeVM.applyChange()
                        focused = false
                    }
                    .opacity(focused ? 1.0 : 0.0)
                    .animation(.easeIn, value: focused)

                Text("save")
                    .font(.caption)
                    .padding(3)
                    .background(Color.gray.opacity(0.5))
                    .clipShape(RoundedRectangle(cornerRadius: 5))
                    .onTapGesture {
                        homeVM.applyChange()
                        focused = false
                    }
                    .opacity(focused ? 1.0 : 0.0)
                    .animation(.easeIn, value: focused)
            }
        }
    }
}

//
#Preview {
    MemoView(memo: MemoEntity.example, add_fail: .constant(true))
}
